<template>
  <div v-if="modalVisible" :style="pageStyle" class="page-detail-box">
    <div :style="contentStyle" class="content-box">
      <slot></slot>
    </div>
    <div v-if="!noFooter" class="footer-box space-btn">
      <slot name="footer">
        <a-button type="primary" @click="onCancel">确定</a-button>
        <a-button @click="onCancel">取消</a-button>
      </slot>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: 'PageDetail',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    noFooter: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
    };
  },
  computed: {
    ...mapState({
      device: state => state.app.device,
    }),
    isMobile () {
      return this.device === 'mobile';
    },
    isDesktop () {
      return this.device === 'desktop';
    },
    modalVisible: {
      set(val) {
        this.$emit('update:visible', val);
      },
      get() {
        return this.visible;
      }
    },
    pageStyle() {
      return {
        position: 'fixed',
        top: this.isDesktop ? '94px' : '54px',
        left: this.isDesktop ? '154px' : '4px',
        width: this.isDesktop ? 'calc(100vw - 168px)' : 'calc(100vw - 14px)',
        height: this.isDesktop ? 'calc(100vh - 98px)' : 'calc(100vh - 58px)',
      }
    },
    contentStyle() {
      return {
        minHeight: this.isDesktop ? 'calc(100vh - 98px - 50px)' : 'calc(100vh - 57px - 50px)'
      }
    },
  },
  methods: {
    onCancel() {
      this.modalVisible = false;
    }
  }
};
</script>

<style lang="less" scoped>
.page-detail-box {
  border-radius: 0px 0px 8px 8px;
  background-color: #fff;
  // background-color: rgb(240, 242, 245);
  box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1);

  // padding: 0 0 50px;
  overflow-y: auto;
}

.content-box {
  // height: 100%;
  // overflow-y: auto;
}

.footer-box {
  height: 50px;
  line-height: 50px;
  border-radius: 0px 0px 8px 8px;
  background-color: rgba(31, 127, 227, 0.08);
  text-align: center;
  outline: 1px solid rgba(204, 204, 204, 1);
}
</style>
